<template>
  <n-card :content-style="{ padding: '10px' }" :header-style="{ padding: '5px' }" :segmented="true">
    <template #header>
      <n-skeleton text v-if="loading" width="60%" />
      <template v-else>
        <div class="flex items-center justify-between">
          <span class="text-sm text-bold">{{ dataModel.title }}</span>
          <SvgIcon style="font-size: 26px" :name="dataModel.iconClass" />
        </div>
      </template>
    </template>
    <n-skeleton text v-if="loading" :repeat="6" />
    <template v-else>
      <div style="height: 130px" class="flex flex-col justify-between">
        <div class="flex flex-col justify-center">
          <span class="text-xxl">{{ dataModel.data }}</span>
        </div>
        <div class="flex flex-col justify-center flex-1">
          <slot name="extra" :extra="dataModel.extra"></slot>
        </div>
        <div class="divide"></div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-grey">{{ dataModel.bottomTitle }}</span>
          <span class="text-sm text-grey">{{ dataModel.totalSum }}</span>
        </div>
      </div>
    </template>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'DataItem',
    props: {
      dataModel: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    setup() {
      const loading = ref(true)
      setTimeout(() => {
        loading.value = false
      }, 1000)
      return {
        loading,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .divide {
    margin: 10px 0;
    border-bottom: 1px solid #f5f5f5;
  }
</style>
